<action-sheet>
  <div class="encrypt-password" *ngIf="!showForm">
    <div class="encrypt-password-info">
      <div class="img-container">
        <img src="assets/img/icon-encrypt.svg" />
      </div>
      <div class="info">
        <h3 class="title" translate>Add Encryption?</h3>
        <div class="text" translate>
          An encrypted passphrase is an extra layer of security that can prevent hackers from accessing your cryptocurrency if this device were ever stolen or compromised by malicious software.
        </div>
      </div>
    </div>
    <div class="footer">
      <button ion-button class="button-standard no-margin-bottom" (click)="showForm = !showForm">
        {{'Yes' | translate}}
      </button>
      <button ion-button clear color="primary" class="button-standard" (click)="showInfoSheet()">
        {{'No' | translate}}
      </button>
    </div>
  </div>

  <div class="encrypt-password" *ngIf="showForm">
    <div class="encrypt-password-form">
      <div class="slide-title">
        {{'Add Encryption' | translate}}
      </div>
      <form [formGroup]="encryptPasswordForm">
        <ion-item>
          <ion-label floating>{{'Passphrase' | translate}}</ion-label>
          <ion-input [type]="passwordInputType" formControlName="password"></ion-input>
          <button ion-button clear item-end (click)="passwordInputType = (passwordInputType == 'password') ? 'text' : 'password';">
            <ion-icon [name]="(passwordInputType == 'password') ? 'md-eye-off' : 'md-eye'"></ion-icon>
          </button>
        </ion-item>
        <ion-item>
          <ion-label floating>{{'Confirm Passphrase' | translate}}</ion-label>
          <ion-input [type]="confirmPasswordInputType" formControlName="confirmPassword"></ion-input>
          <button ion-button clear item-end (click)="confirmPasswordInputType = (confirmPasswordInputType == 'password') ? 'text' : 'password';">
            <ion-icon *ngIf="encryptPasswordForm.controls.confirmPassword.touched && encryptPasswordForm.hasError('mismatchedPasswords') && encryptPasswordForm.controls.password.valid" name="md-alert"></ion-icon>
            <ion-icon [name]="(confirmPasswordInputType == 'password') ? 'md-eye-off' : 'md-eye'"></ion-icon>
          </button>
        </ion-item>
        <ion-item class="no-lines">
          <span *ngIf="encryptPasswordForm.controls.confirmPassword.touched && encryptPasswordForm.hasError('mismatchedPasswords') && encryptPasswordForm.controls.password.valid" ion-text color="error" translate>Passphrases do not match</span>
        </ion-item>
      </form>
      <label-tip type="info" header="no-header">
        <div label-tip-body>
          {{'Enter an alphanumeric passphrase to encrypt your wallet' | translate }}
          <span *ngIf="!isCopay"> {{'For best security this should not match your BitPay ID password.' | translate }}</span>
        </div>
      </label-tip>
    </div>
    <div class="footer">
      <button ion-button type="submit" class="button-standard no-margin-bottom" [disabled]="!encryptPasswordForm.valid" (click)="confirm(encryptPasswordForm.value.password)">
        {{'Continue' | translate}}
      </button>
      <button ion-button clear color="primary" class="button-standard" (click)="showInfoSheet()">
        {{'Never mind' | translate}}
      </button>
    </div>
  </div>
</action-sheet>